
<template>
    <div class="cpcCenter">
        <div class="centerL">
            <div class="centerL1">
                <p class="biaoLine">党员发展情况</p>
                <div class="cpcCchatBox1">
                    <div id="cpcCchat1" style="width: 100%; height: 100%"></div>
                </div>
            </div>
            <div class="centerL2">
                <p class="biaoLine">各运营分公司党员情况</p>
                <div class="cpcCchatBox2">
                    <div class="cpcCchatBox2l">
                        <div
                            id="mapchart"
                            style="width: 100%; height: 100%"
                        ></div>
                    </div>
                    <div class="cpcCchatBox2r">
                        <p class="biao">云商党支部活动</p>
                        <ul class="lisy">
                            <li
                                class="lisyLi"
                                v-for="(item, index) in activeList"
                                :key="index"
                            >
                                {{ item }}
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="close" @click="closeUrl">
                    <img src="@/assets/cpc/close.png" alt="" />
                </div>
            </div>
        </div>
        <div class="centerR">
            <div class="rBox">
                <div class="biaoBg">
                    <p class="biaoP">党建联建</p>
                </div>
                <ul class="imgArr">
                    <li class="arrL">
                        <div class="arritem">
                            <img
                                class="arritemIng"
                                :src="PartyBuilding[0]"
                                alt=""
                            />
                        </div>
                        <div class="arritem">
                            <img
                                class="arritemIng"
                                :src="PartyBuilding[1]"
                                alt=""
                            />
                        </div>
                    </li>
                    <li class="arrR">
                        <div class="arritem">
                            <img
                                class="arritemIng"
                                :src="PartyBuilding[2]"
                                alt=""
                            />
                        </div>
                        <div class="arritem">
                            <img
                                class="arritemIng"
                                :src="PartyBuilding[3]"
                                alt=""
                            />
                        </div>
                    </li>
                </ul>
            </div>
            <div class="rBox">
                <div class="biaoBg">
                    <p class="biaoP">荣誉樯</p>
                </div>
                <ul class="imgArr">
                    <li class="arrLdis">
                        <div class="arritem">
                            <img
                                class="arritemIng"
                                :src="HonorWall[0]"
                                alt=""
                            />
                        </div>
                    </li>
                    <li class="arrR2">
                        <div class="arritem">
                            <img
                                class="arritemIng"
                                :src="HonorWall[1]"
                                alt=""
                            />
                        </div>
                        <div class="arritem">
                            <img
                                class="arritemIng"
                                :src="HonorWall[2]"
                                alt=""
                            />
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts/lib/echarts'
import 'echarts-gl'
import zhejiang from '@/assets/map/zhejiang.json'
import { screenMidData } from '@/api/cpc.js'
export default {
    data() {
        return {
            cpcCchat1: null,
            echartObj: null,
            activeList: [],
            PartyBuilding: [],
            HonorWall: [],
            option: {
                tooltip: {
                    show: false,
                    formatter: (params) => {
                        return `<div style="padding:0 12px;width: 137px;
height: 103px;color: #FFFFFF;font-size:12px;">
                          <p style="padding: 0;margin: 0;line-height: 20px;height: 20px;" >${params.name}</p>
                          <p style="padding: 0;margin: 0;line-height: 20px;height: 20px;" >6个站点</p>
                          <p style="padding: 0;margin: 0;line-height: 20px;height: 20px;" >400位服务人员</p>
                          <p style="padding: 0;margin: 0;line-height: 20px;height: 20px;" >10种活动</p>
                          <p style="padding: 0;margin: 0;line-height: 20px;height: 20px;" >20项服务</p>
                      </div>`
                    },
                    borderColor: 'rgba(17,55,118,0.7)',
                    borderWidth: 1,
                    padding: [5, 0],
                    backgroundColor: 'rgba(17,55,118,0.7)',
                    borderRadius: 10
                },
                visualMap: {
                    show: false,
                    min: 0, //指定 visualMapContinuous 组件的允许的最小值。
                    max: 10, //指定 visualMapContinuous 组件的允许的最大值
                    inRange: {
                        color: [
                            'rgba(247, 94, 20, 0.1)',
                            'rgba(247, 94, 20, 0.2)',
                            '#F75E14'
                        ]
                    },
                    calculable: true //是否显示拖拽用的手柄（手柄能拖拽调整选中范围）。
                },
                series: {
                    name: '浙江',
                    type: 'map3D',
                    map: '浙江', //地图类型。echarts-gl 中使用的地图类型同 geo 组件相同
                    regionHeight: 2, //模型的高度
                    boxWidth: 70, //三维地图在三维场景中的宽度
                    //boxHeight:50,
                    boxDepth: 60, //三维地图在三维场景中的深度
                    top: '0%',
                    left: '0%',
                    label: {
                        show: true, //是否显示标签。
                        position: ['60%', '50%'],
                        formatter: (params) => {
                            params.name
                        },
                        color: 'rgba(255,255,255,1)', //地图初始化区域字体颜色
                        fontSize: 13,
                        opacity: 1,
                        backgroundColor: '',
                        borderColor: '',
                        borderWidth: 1,
                        position: 'insideTop',
                        padding: 4,
                        borderRadius: 2,
                        distance: 0
                    },
                    itemStyle: {
                        //静态模式下显示的默认样式
                        borderWidth: 0.5,
                        borderColor: 'rgba(255,255,255,0.7)',
                        color: 'rgba(255, 158, 17, 0.7)' //阴影效果
                    },
                    emphasis: {
                        // 鼠标移上去的样式
                        borderWidth: 1.6,
                        borderColor: '#95FFFF',
                        color: '#1638D5',
                        textStyle: {
                            color: 'blue'
                        }
                    },
                    viewControl: {
                        //用于鼠标的旋转，缩放等视角控制。
                        autoRotate: false, //是否开启视角绕物体的自动旋转查看
                        autoRotateAfterStill: 10,
                        distance: 80, //默认视角距离主体的距离，对于 globe 来说是距离地球表面的距离，对于 grid3D 和 geo3D 等其它组件来说是距离中心原点的距离。在 projection 为'perspective'的时候有效。
                        minAlpha: 80, // 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
                        maxAlpha: 90, // 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ]
                        minBeta: -360, // 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。[ default: -80 ]
                        maxBeta: 360, // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。[ default: 80 ]
                        animation: true, // 是否开启动画。[ default: true ]
                        animationDurationUpdate: 1000, // 过渡动画的时长。[ default: 1000 ]
                        animationEasingUpdate: 'cubicInOut' // 过渡动画的缓动效果。[ default: cubicInOut ]
                    },
                    data: []
                }
            }
        }
    },
    mounted() {
        //MAP
        this.echartObj = echarts.init(document.getElementById('mapchart'))
        echarts.registerMap('浙江', zhejiang)
        this.cpcCenterAll()
    },
    methods: {
        cpcCenterAll() {
            screenMidData().then((res) => {
                let xAxis = res.data.DevelopmentOfParty.line.xAxis
                let series = res.data.DevelopmentOfParty.line.series
                this.drawcpcCchat1(xAxis, series)
                this.option.series.data = res.data.BranchParty
                this.echartObj.setOption(this.option, true)
                this.activeList = res.data.PartyActivity
                this.PartyBuilding = res.data.PartyBuilding
                this.HonorWall = res.data.HonorWall
            })
        },
        drawcpcCchat1(xAxis, series) {
            this.cpcCchat1 = this.$echarts.init(
                document.getElementById('cpcCchat1')
            )
            let option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    top: '15%',
                    right: '3%',
                    left: '20%',
                    bottom: '12%'
                },
                xAxis: [
                    {
                        type: 'category',
                        data: xAxis,
                        axisLine: {
                            lineStyle: {
                                color: 'rgba(255,255,255,0.12)'
                            }
                        },
                        axisLabel: {
                            margin: 10,
                            color: '#e2e9ff',
                            textStyle: {
                                fontSize: 14
                            }
                        }
                    }
                ],
                yAxis: [
                    {
                        axisLabel: {
                            formatter: '{value}',
                            color: '#e2e9ff'
                        },
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: 'rgba(255,255,255,1)'
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                color: 'rgba(255,255,255,0.12)'
                            }
                        }
                    }
                ],
                series: [
                    {
                        type: 'bar',
                        data: series,
                        barWidth: '18px',
                        itemStyle: {
                            normal: {
                                color: this.$echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                            offset: 0,
                                            color: 'rgba(246, 221, 180, 1)' // 0% 处的颜色
                                        },
                                        {
                                            offset: 1,
                                            color: 'rgba(201, 156, 82, 1)' // 100% 处的颜色
                                        }
                                    ],
                                    false
                                ),
                                barBorderRadius: [30, 30, 30, 30],
                                shadowColor: 'rgba(227, 134, 114, 1)',
                                shadowBlur: 4
                            }
                        },
                        label: {
                            normal: {
                                show: true,
                                lineHeight: 30,
                                width: 60,
                                height: 30,
                                backgroundColor: 'rgba(227, 134, 114, 0.3)',
                                borderRadius: 20,
                                position: 'top',
                                distance: 1,
                                textStyle: {
                                    color: '#ffffff'
                                },
                                formatter: function (params) {
                                    return params.value + '人'
                                }
                            }
                        }
                    }
                ]
            }

            this.cpcCchat1.setOption(option)
        },
        closeUrl() {
            this.$router.push({
                path: '/'
            })
        }
    }
}
</script>

<style lang='scss' scoped>
.cpcCenter {
    display: flex;
    justify-content: space-between;
    .centerL {
        width: 829px;
        height: 296px;
        background-image: url('../../../assets/cpc/mix.png');
        background-position: center center;
        background-size: cover;
        display: flex;
        position: relative;

        .centerL1 {
            position: absolute;
            width: 232px;
            height: 286px;
            .biaoLine {
                position: absolute;
                top: 20px;
                left: 20px;
            }
            .cpcCchatBox1 {
                width: 232px;
                height: 240px;
                position: absolute;
                top: 35px;
                left: -1px;
            }
        }
        .centerL2 {
            position: absolute;
            left: 322px;
            top: 5px;
            width: 497px;
            height: 254px;
            .close {
                width: 52px;
                height: 52px;
                position: absolute;
                bottom: -28px;
                right: -24px;
                cursor: pointer;
                img {
                    width: 52px;
                    height: 52px;
                }
            }
            .biaoLine {
                position: absolute;
                top: 9px;
                left: 18px;
            }
            .cpcCchatBox2 {
                width: 497px;
                height: 208px;
                background-image: url('../../../assets/cpc/mixBg.png');
                background-position: center center;
                background-size: cover;
                position: absolute;
                top: 41px;
                left: -1px;
                display: flex;
                .cpcCchatBox2l {
                    width: 260px;
                    height: 200px;
                }
                .cpcCchatBox2r {
                    width: 231px;
                    height: 188px;
                    background-image: url('../../../assets/cpc/info.png');
                    background-position: center center;
                    background-size: 100% 100%;
                    margin-top: 10px;
                    margin-left: 15px;
                    color: #ffffff;
                    box-sizing: border-box;
                    padding: 20px 15px;
                    font-size: 18px;
                    text-align: center;
                    overflow: hidden;
                    .biao {
                        margin-bottom: 10px;
                    }
                    .lisyLi {
                        line-height: 18px;
                        font-size: 13px;
                        text-align: center;
                        margin-bottom: 5px;
                    }
                }
            }
        }
    }
    .centerR {
        width: 950px;
        display: flex;
        justify-content: space-between;
        margin-top: 13px;
        .rBox {
            width: 450px;
            .biaoBg {
                width: 448px;
                height: 36px;
                background-image: url('../../../assets/cpc/biaoBg.png');
                background-position: center center;
                background-size: cover;
                color: #ffffff;
                font-size: 18px;
                padding: 10px 0 0 16px;
            }
            .imgArr {
                width: 100%;
                box-sizing: border-box;
                display: flex;
                justify-content: space-between;
                margin-top: 13px;
                .arrL {
                    width: 248px;
                    height: 204px;
                    display: flex;
                    flex-wrap: wrap;
                    align-content: space-between;
                    .arritem {
                        width: 100%;
                        height: 95px;
                        background: #ffffff;
                        border-radius: 3px;
                        overflow: hidden;
                        .arritemIng {
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
                .arrR {
                    width: 190px;
                    height: 204px;
                    display: flex;
                    flex-wrap: wrap;
                    align-content: space-between;
                    .arritem {
                        width: 100%;
                        height: 95px;
                        background: #ffffff;
                        border-radius: 3px;
                        overflow: hidden;
                        .arritemIng {
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
                .arrR2 {
                    width: 160px;
                    height: 204px;
                    display: flex;
                    flex-wrap: wrap;
                    align-content: space-between;
                    .arritem {
                        width: 100%;
                        height: 95px;
                        background: #ffffff;
                        border-radius: 3px;
                        overflow: hidden;
                        .arritemIng {
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
                .arrLdis {
                    width: 280px;
                    height: 204px;

                    .arritem {
                        width: 100%;
                        height: 100%;
                        background: #ffffff;
                        border-radius: 3px;
                        overflow: hidden;
                        .arritemIng {
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
            }
        }
    }
}
</style>